<template>
  <div>
    <div class="mb20" style="text-align: right">
      <a-button type="primary" icon="plus" @click="handleAddFile">添加资质附件</a-button>
    </div>
    <template v-if="listData.length">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item,index) in listData" :key="index">
          <el-card shadow="hover">
            <el-image class="image-file" v-viewer alt="example" :src="item.savePath" fit="cover" />
            <div style="text-align: center">
              <!-- <span>{{ judgeType(item.accessoryType) }}</span> + -->
              <span
                class="mr10"
              >{{ judgeType(item.accessoryType) }} {{ index > 0 ? Number(index+1) : null }}</span>
              <i class="red curp el-icon-delete" @click="handleDelete(item,index)" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { saveOnlyUploads } from '@/api/supplier'
import { getDicData } from '@/utils/util'

export default {
  data() {
    return {
      listData: [],
      fileList: [],
      accessoryTypeArr: []
    }
  },
  mounted() {
    this.accessoryTypeArr = getDicData('002', '002005')
  },
  methods: {
    handleDelete(item, index) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除这个附件吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          _this.listData.splice(index, 1)
        }
      })
    },
    judgeType(key) {
      let str = ''
      this.accessoryTypeArr.map(v => {
        if (v.key === key) {
          str = v.title
        }
      })
      return str
    },
    saveData(arr) {
      arr.map(v => {
        this.listData.push(v)
      })
    },
    edit(arr) {
      console.log('接收 arr', arr)
      this.listData = [...arr]
    },
    getFormData() {
      if (this.listData.length > 1) {
        this.$emit('sendData', this.listData, 4)
      } else {
        this.$message.error('请添加至少一个资质附件')
        this.$emit('notSubmit', false, 4)
      }
    },
    handleAddFile() {
      this.$emit('addFile')
    }
  }
}
</script>

<style scoped>
.avatar-uploader >>> .ant-upload {
  width: 200px;
  height: 200px;
}

.image-file {
  max-width: 150px;
  max-height: 60px;
}
</style>
